<template>
	<div class="uiue-card" style="margin-top: 0" v-if="datas">
		<div class="tit">基本信息</div>
		<a-descriptions class="descri">
			<a-descriptions-item label="应用名称">{{ datas.appName }}</a-descriptions-item>
			<a-descriptions-item label="应用分类">{{
		$TOOL.dictTypeData('APP_CLASS', datas.appCategory)
	}}</a-descriptions-item>
			<a-descriptions-item label="应用范围">{{ $TOOL.dictTypeData('app_range', datas.appRange)
				}}</a-descriptions-item>
			<a-descriptions-item label="应用ID">{{ datas.appCode }}</a-descriptions-item>
			<!-- <a-descriptions-item label="应用关键字">{{ datas.appKeywords }}</a-descriptions-item> -->
			<!-- <a-descriptions-item label="应用状态">{{ datas.appStatus == 1 ? '有效' : '无效' }}</a-descriptions-item> -->
			<a-descriptions-item label="项目经理">{{ appContact }}</a-descriptions-item>
			<a-descriptions-item label="技术支持">{{ datas.versionNumber }}</a-descriptions-item>
			<a-descriptions-item label="应用三级系统名">{{ datas?.threeSystemName || '' }}</a-descriptions-item>
			<a-descriptions-item label="反馈接收人">{{ datas.operationsSupport }}</a-descriptions-item>
			<a-descriptions-item label="需求单编号">{{ datas.reqFormCode }}</a-descriptions-item>
			<!-- <a-descriptions-item label="用户范围">{{ datas.appAccountid }}</a-descriptions-item> -->
			<a-descriptions-item label="应用有效期">{{ datas.validTime }}</a-descriptions-item>
			<a-descriptions-item label="应用介绍" :contentStyle="contentStyle" class="scro">{{ datas.appDescription
				}}</a-descriptions-item>
			<a-descriptions-item label="其他说明" :contentStyle="contentStyle" class="scro">
				{{ datas.otherInfo }}
			</a-descriptions-item>
			<a-descriptions-item label="双端接入">{{ appAccess }}</a-descriptions-item>
			<a-descriptions-item label="应用归属">{{ platform }}</a-descriptions-item>
			<a-descriptions-item v-if="datas.appOnlineTime" label="移动端预计上线时间">{{ datas.appOnlineTime
				}}</a-descriptions-item>
		</a-descriptions>
		<a-descriptions>
			<a-descriptions-item label="是否接门户端待办">{{ filterRadio(datas.isPcTodo)
				}}</a-descriptions-item>
			<a-descriptions-item label="是否接门户端待阅">{{ filterRadio(datas.isPcReadtodo)
				}}</a-descriptions-item>
			<a-descriptions-item label="无法双端同步接入待办待阅原因" v-if="datas.noAccessTypeRemark">{{
		$TOOL.dictTypeData('REASON_ACCESS', datas.noAccessTypeRemark)
	}}</a-descriptions-item>
		</a-descriptions>
		<a-descriptions>
			<a-descriptions-item label="是否接移动端待办">{{ filterRadio(datas.isAppTodo)
				}}</a-descriptions-item>
			<a-descriptions-item label="是否接移动端待阅">{{ filterRadio(datas.isAppReadtodo)
				}}</a-descriptions-item>
			<a-descriptions-item label="无法双端同步接入待办待阅其他原因" v-if="datas.noAccessTypeRemark == 5">{{
		datas.appRemark
	}}</a-descriptions-item>
		</a-descriptions>
	</div>
	<div v-if="datas" class="uiue-card" style="padding-top: 0">
		<a-tabs v-model:activeKey="configKey">
			<a-tab-pane key="1" tab="门户端" force-render>
				<div class="tit" style="margin-bottom: 10px">配置信息</div>
				<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical" class="form-box">
					<a-row v-for="(item, index) in formOption" :key="index" :gutter="75">
						<a-col :span="8" v-for="v in item" :key="v.prop">
							<a-form-item :name="v.prop" v-if="!v.isrequire">
								<LabelDes :label="v.label" :prop="v.prop" />
								<a-input v-if="v.type === 'text'" v-model:value="formData[v.prop]"
									:maxlength="v.maxlength" :placeholder="v.placeholder" allow-clear />

								<a-select v-if="v.type === 'select'" v-model:value="formData[v.prop]"
									:placeholder="v.placeholder" :options="v.option" allow-clear />
								<a-radio-group v-if="v.type === 'radio'" v-model:value="formData[v.prop]"
									:options="radioOption" :name="v.prop" @change="radioChange" />
								<!-- <a-date-picker ref="pickss" style="width: 100%" valueFormat="YYYY-MM-DD"
									v-if="v.type === 'date'" :showToday="false" v-model:value="formData[v.prop]">
								</a-date-picker> -->
							</a-form-item>
							<a-form-item :name="v.prop" v-if="v.isrequire">
								<LabelDes :label="v.label" :prop="v.prop" />
								<a-input v-if="v.type === 'text'" v-model:value="formData[v.prop]"
									:maxlength="v.maxlength" :placeholder="v.placeholder"
									:disabled="v.prop === 'singlepointUrl'" allow-clear />
								<a-input v-if="v.type === 'appUrl'" :maxlength="v.maxlength"
									v-model:value="formData[v.prop]" :placeholder="v.placeholder" @change="appUrlChange"
									allow-clear />
							</a-form-item>

						</a-col>
					</a-row>
					<div>
						<a-row v-for="(item, index) in formOptionDb" :key="index" :gutter="75">
							<a-col :span="8" v-for="v in item" :key="v.prop">
								<a-form-item :name="v.prop">
									<LabelDes :label="v.label" :prop="v.prop" :isRequ="datas.isPcTodo === '1'" />
									<a-input v-if="v.type === 'text'" v-model:value="formData[v.prop]"
										:maxlength="v.maxlength" :placeholder="v.placeholder"
										:disabled="datas.isPcTodo == '0'" allow-clear />
									<a-input-password v-if="v.type === 'password'" v-model:value="formData[v.prop]"
										:maxlength="v.maxlength" :placeholder="v.placeholder"
										:disabled="datas.isPcTodo == '0'" />
									<a-select v-if="v.type === 'select'" v-model:value="formData[v.prop]"
										:placeholder="v.placeholder" :options="v.option"
										:disabled="datas.isPcTodo == '0'" allow-clear />
								</a-form-item>
							</a-col>
						</a-row>
					</div>
					<div>
						<a-row v-for="(item, index) in formOptionDy" :key="index" :gutter="75">
							<a-col :span="8" v-for="v in item" :key="v.prop">
								<a-form-item :name="v.prop">
									<LabelDes :label="v.label" :prop="v.prop"
										:isRequ="datas.isPcTodo === '1' && datas.isPcReadtodo === '1'" />
									<a-input v-if="v.type === 'text'" v-model:value="formData[v.prop]"
										:placeholder="v.placeholder" :disabled="datas.isPcReadtodo == '0'"
										allow-clear />
									<a-input-password v-if="v.type === 'password'" v-model:value="formData[v.prop]"
										:placeholder="v.placeholder" :disabled="datas.isPcReadtodo == '0'" />
									<a-select v-if="v.type === 'select'" v-model:value="formData[v.prop]"
										:placeholder="v.placeholder" :options="v.option"
										:disabled="datas.isPcReadtodo == '0'" />
								</a-form-item>
							</a-col>
						</a-row>
					</div>

					<a-row :gutter="75">
						<a-col :span="8">
							<a-form-item name="compatibility">
								<LabelDes label="兼容性" prop="compatibility" />
								<a-checkbox-group v-model:value="formData.compatibility" :options="compatibleOptions" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item name="authType">
								<LabelDes label="认证状态" prop="authType" />
								<a-select v-model:value="formData.authType" placeholder="基本认证"
									:options="tool.dictList('CERTIFIED')" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item name="pcLogo">
								<LabelDes label="门户端应用logo" prop="pcLogo" />
								<div class="upload-box">
									<a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card"
										class="avatar-uploader" :customRequest="customRequest" :accept="fileImgType"
										:before-upload="beforeUpload" @change="handleChange" @preview="handlePreview">
										<div v-if="fileList?.length == 0">
											<plus-outlined></plus-outlined>
											<div class="ant-upload-text">上传图片</div>
										</div>
									</a-upload>
									<div class="annotation">
										<div class="tit1">*注</div>
										<div>1.应用logo需要满足UI/UE规范;</div>
										<div>2.需要上传.png/.jpg/.jpeg格式文件;</div>
										<div>3.文件大小为不超过200K;</div>
									</div>
								</div>
							</a-form-item>
						</a-col>
					</a-row>
					<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
						<img alt="example" style="width: 100%" :src="imageUrl" />
					</a-modal>
				</a-form>
			</a-tab-pane>
		</a-tabs>
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
			<img alt="example" style="width: 100%" :src="imageUrl" />
		</a-modal>
	</div>
	<annexFormNew v-if="datas" :isup="false" ref="annex" type="PC" />
	<div class="uiue-card btn">
		<a-button class="bt1" @click="backs">取消</a-button>
		<a-button type="primary" :loading="btnloding" @click="submit">提交</a-button>
	</div>
	<PickPeople ref="pick" @succses="setUser" :setPersions="true" v-if="roleList.length > 0" :roleList="roleList" />
</template>

<script setup name="Protal">
import LabelDes from './LabelDes.vue'
import fileApi from '@/api/dev/fileApi'
import appInfoApi from '@/api/biz/appInfoApi'
import tool from '@/utils/tool'
import roleApi from '@/api/sys/roleApi'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { cloneDeep } from 'lodash-es'
import sysConfig from '@/config/index'
import annexFormNew from './form/annexFormNew.vue'
import PickPeople from '@/components/pickPeople/index.vue'
import bizRoleApi from '@/api/biz/bizRoleApi'
const fileUrl = import.meta.env.VITE_FILE_URL
const fileImgType = '.jpg,.png,.jpeg,'
const formRef = ref()
// const pickss = ref(null)
const btnloding = ref(false)
const route = useRoute()
const router = useRouter()
onMounted(() => {
	detailDate()

})
const contentStyle = {
	maxHeight: '64px',
	overflowY: 'auto'
}
// 表单数据
const formData = ref({
	isAuth: '1',
	isSinglepoint: '1',
	isHideLogo: '1',
	pcLogo: '',
	pcVersion: '1.0',
	readingDatasourcePassword: '135790',
	pendingDatasourcePassword: '135790'
})
// const config = [
// 	{ txt: '门户Html', key: '1', type: 'pcPropertiesList', oid: 'PC' },
// 	{ txt: '移动端Html', key: '2', type: 'appPropertiesList', oid: 'APP' },
// 	{ txt: 'Android', key: '3', type: 'androidPropertiesList', oid: 'ANDROID' },
// 	{ txt: 'IOS', key: '4', type: 'iosPropertiesList', oid: 'IOS' },
// 	{ txt: '移动端UMAP', key: '5', type: 'umapPropertiesList', oid: 'UMAP' }
// ]
const config = sysConfig.DEVICE_CONFIG
const appAccess = computed(() => {
	let str = ''
	if (datas.value.appAccess) {
		if (datas.value.appAccess.includes(',')) {
			let arr = config.filter((v) => datas.value.appAccess.includes(v.key))
			str = arr.map((v) => v.txt).join()
		} else {
			str = config.find((v) => v.key === datas.value.appAccess).txt
		}
	}
	return str
})
const pcTodoShow = computed(() => {
	return datas.value.appAccess.includes('1')
})
const appTodoShow = computed(() => {
	let arr = ['2', '3', '4', '5', '6']
	return arr.includes(datas.value.appAccess) || datas.value.appAccess.includes(',')
})
const platform = ref('')
const appInfoApiList = async () => {
	const list = await roleApi.getPermissionsdl()
	const obj = list.find((v) => v.deptId === datas.value.platformBelongId)
	if (obj) platform.value = obj.orgName
}
const appContact = ref()
const isPM = () => {
	appInfoApi.isPM().then((data) => {
		let obj = data.find((v) => v.id == datas.value?.appContact)
		appContact.value = `${obj?.name} ${obj?.phone || ''} ${obj?.email || ''}`
	})
}
// 单选option
const radioOption = [
	{ label: '是', value: '1' },
	{ label: '否', value: '0' }
]
// 单选数据过滤
const filterRadio = (val) => {
	if (val) {
		const obj = radioOption.find((item) => item.value == val)
		return obj.label
	}
}
const valiUrl = async (_, value) => {
	if (!value) {
		return Promise.reject('请输入')
	}
	if (/[\u4E00-\u9FA5]/g.test(value)) {
		return Promise.reject('不能输入汉字!')
	}
	return Promise.resolve()
}
const valiFont = async (_, value) => {
	if (!value) {
		return Promise.reject('请输入版本说明')
	}
	if (value.length < 5) {
		return Promise.reject('不能少于5个字!')
	}
	return Promise.resolve()
}
const valiFontFive = async (rule, value) => {
	if (rule.required && !value) {
		return Promise.reject('请输入地址')
	}
	if (rule.required && value.length > 50) {
		return Promise.reject('不能大于50个字!')
	}
	return Promise.resolve()
}
const valiMail = async (rule, value) => {
	const reg = /^[a-zA-Z0-9][\w\.-]*@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/;
	if (rule.required && !value) {
		return Promise.reject('请输入对端系统管理人邮箱')
	}
	if (rule.required && !reg.test(value)) {
		return Promise.reject('请输入正确的邮箱!')
	}
	return Promise.resolve()
}
// 兼容option
const compatibleOptions = ['IE8', 'IE9', 'IE10', 'IE11', 'chrome', 'firefox', '其他']
const changeRulesDB = reactive({
	pendingCategory: [{ required: true, message: '请输入待办所属分类', trigger: 'blur' }],
	pendingDatasourceUrl: [{ required: true, message: '请输入待办稽核地址', trigger: 'blur' }],
	pendingDatasourceType: [{ required: true, message: '请输入数据库类型', trigger: 'blur' }],
	pendingDatasourceUsername: [{ required: true, message: '请输入数据库账号', trigger: 'blur' }],
	// pendingDatasourcePassword: [{ required: true, message: '请输入数据库密码', trigger: 'blur' }],
	pendingTablename: [{ required: true, validator: valiFontFive, trigger: 'blur' }],
	pendingUserMail: [{ required: true, validator: valiMail, trigger: 'blur' }]
})
const changeRulesDY = reactive({
	readingCategory: [{ required: true, message: '请输入待办所属分类', trigger: 'blur' }],
	readingDatasourceUrl: [{ required: true, message: '请输入待阅稽核地址', trigger: 'blur' }],
	readingDatasourceType: [{ required: true, message: '请输入数据库类型', trigger: 'blur' }],
	readingDatasourceUsername: [{ required: true, message: '请输入数据库账号', trigger: 'blur' }],
	// readingDatasourcePassword: [{ required: true, message: '请输入数据库密码', trigger: 'blur' }],
	readingTablename: [{ required: true, message: '请输入待阅核视图地址', trigger: 'blur' }],
	readingUserMail: [{ required: true, validator: valiMail, trigger: 'blur' }]
})
// 默认要校验的
const formRules = reactive({

	// threeSystemName: [{ required: true, message: '请输入应用三级系统名', tirgger: 'blur' }],
	appInfoKeywords: [{ required: true, message: '请输入应用关键字', tirgger: 'blur' }],
	// pcOnlineTime: [{ required: true, message: '请选择时间', tirgger: 'blur' }],
	pcVersionNote: [{ required: true, validator: valiFont, trigger: 'blur' }],
	isAuth: [{ required: true, message: '', trigger: 'blur' }],
	isSinglepoint: [{ required: true, message: '', trigger: 'blur' }],
	singlepointUrl: [{ required: true, message: '单点地址', tirgger: 'blur' }],
	compatibility: [{ required: true, message: '请选择兼容性', trigger: 'blur' }],
	authType: [{ required: true, message: '请选择认证状态', trigger: 'blur' }],
	pcLogo: [{ required: true, message: '请选择logo', trigger: 'blur' }],
	appShortName: [{ required: true, message: '请输入应用简称', trigger: 'blur' }],
	appTutorials: [{ required: true, message: '请输入应用教程', trigger: 'blur' }],
	appUrl: [{ required: true, validator: valiUrl, trigger: 'blur' }],
	batchReadUrl: [{ required: true, message: '请输入批量已阅地址', trigger: 'blur' }],
	...changeRulesDY,
	...changeRulesDB
})
const formOption = [
	[
		// { label: '版本号', type: 'text', prop: 'pcVersion', placeholder: '请输入版本号' },

		// {
		// 	label: '应用三级系统名',
		// 	type: 'text',
		// 	prop: 'threeSystemName',
		// 	placeholder: '请输入应用三级系统名',
		// 	maxlength: 30
		// },
		{
			label: '应用关键字',
			type: 'text',
			prop: 'appInfoKeywords',
			placeholder: '请输入应用关键字'
		},

		{
			label: '版本说明',
			type: 'text',
			prop: 'pcVersionNote',
			placeholder: '请输入版本说明不超过30字',
			maxlength: 30,
		},
		{
			label: '是否鉴权',
			type: 'radio',
			prop: 'isAuth',
			placeholder: '',
			option: radioOption,
		},
		{
			label: '是否单点',
			type: 'radio',
			prop: 'isSinglepoint',
			placeholder: '',
			option: radioOption,
		},
		{
			label: '是否展示图标',
			type: 'radio',
			prop: 'isHideLogo',
			placeholder: '',
			option: radioOption,
		},
		// {
		// 	label: '门户端应用上线时间',
		// 	type: 'date',
		// 	prop: 'pcOnlineTime',
		// 	placeholder: '',
		// },

	],
	[
		// { label: '是否显示', type: 'radio', prop: 'is_show', placeholder: '', option: radioOption },
		{
			label: '应用地址',
			isrequire: true,
			type: 'appUrl',
			prop: 'appUrl',
			placeholder: '请输入应用地址不能超过200字',
			maxlength: 200,
		},

		{
			label: '单点地址',
			isrequire: true,
			type: 'text',
			prop: 'singlepointUrl',
			placeholder: '单点地址不能超过200字',
			maxlength: 200
		},

		{
			label: '应用简称',
			type: 'text',
			prop: 'appShortName',
			placeholder: '请输入应用简称',
			maxlength: 6,
		},
		{
			label: '应用教程',
			type: 'text',
			prop: 'appTutorials',
			placeholder: '请输入应用教程不超过200字',
			maxlength: 200
		}
	],
	[
		{
			label: '批量已阅地址',
			isrequire: true,
			type: 'text',
			prop: 'batchReadUrl',
			placeholder: '请输入单点地址不超过80字',
			maxlength: 80
		}
	]
]
const formOptionDb = [
	[
		{
			label: '待办所属分类',
			type: 'select',
			prop: 'pendingCategory',
			placeholder: '请输入待办所属分类',
			option: tool.dictList('TODO_TYPE'),
		},
		{
			label: '待办稽核地址',
			type: 'text',
			prop: 'pendingDatasourceUrl',
			placeholder: '请输入待办稽核地址',
			maxlength: 500
		},
		{
			label: '数据库类型',
			type: 'text',
			prop: 'pendingDatasourceType',
			placeholder: '请输入数据库类型不超过30字',
			maxlength: 30
		}
	],
	[
		{
			label: '数据库账号',
			type: 'text',
			prop: 'pendingDatasourceUsername',
			placeholder: '请输入数据库账号',
			maxlength: 50
		},
		// {
		// 	label: '数据库密码',
		// 	type: 'password',
		// 	prop: 'pendingDatasourcePassword',
		// 	placeholder: '请输入数据库密码',
		// 	maxlength: 50
		// },
		{
			label: '待办核视图地址',
			type: 'text',
			prop: 'pendingTablename',
			placeholder: '请输入待办核视图地址',
		}
	],
	[
		{
			label: '对端系统管理人邮箱',
			type: 'text',
			prop: 'pendingUserMail',
			placeholder: '请输入对端系统管理人邮箱',
		}
	]
]
const formOptionDy = [
	[
		{
			label: '待阅所属分类',
			type: 'select',
			prop: 'readingCategory',
			placeholder: '请输入待阅所属分类',
			option: tool.dictList('TODO_TYPE'),
		},
		{
			label: '待阅稽核地址',
			type: 'text',
			prop: 'readingDatasourceUrl',
			placeholder: '请输入待阅稽核地址',
		},
		{
			label: '数据库类型',
			type: 'text',
			prop: 'readingDatasourceType',
			placeholder: '请输入数据库类型',
		}
	],
	[
		{
			label: '数据库账号',
			type: 'text',
			prop: 'readingDatasourceUsername',
			placeholder: '请输入数据库账号',
		},
		// {
		// 	label: '数据库密码',
		// 	type: 'password',
		// 	prop: 'readingDatasourcePassword',
		// 	placeholder: '请输入数据库密码',
		// },
		{
			label: '待阅核视图地址',
			type: 'text',
			prop: 'readingTablename',
			placeholder: '请输入待阅核视图地址',
		}
	],
	[
		{
			label: '对端系统管理人邮箱',
			type: 'text',
			prop: 'readingUserMail',
			placeholder: '请输入对端系统管理人邮箱',
		}
	]
]

const fileList = ref([])
const loading = ref(false)
const imageUrl = ref('')
let previewVisible = ref(false)
/*变更编辑  开始*/
const datas = ref()
// const dyshow = ref(false)
const detailDate = async () => {
	datas.value = await appInfoApi.appInfoDetail({ appId: route.query.appId, type: '1' })
	// formData.value = cloneDeep(datas.value.appInfoPcPropertiesAddParam)
	isPcTodoChange(datas.value.isPcTodo)
	isPcReadtodoChange(datas.value.isPcReadtodo)
	// pcConfig.value = datas.value?.pcPropertiesList[0]
	// formBasic.value.isAppTodo = datas.value.isAppTodo || '1'
	// formBasic.value.isAppReadtodo = datas.value.isAppReadtodo || '1'
	// formBasic.value.noAccessRemark = datas.value.noAccessRemark
	// // if (formBasic.value.isAppTodo == '0' || formBasic.value.isAppReadtodo == '0') {
	// // 	dyshow.value = true
	// // }
	// if (!formData.value.pcLogo.includes('store')) {
	// 	//不是老数据
	// 	fileList.value = formData.value.pcLogo ? JSON.parse(formData.value.pcLogo) : []
	// 	fileList.value.forEach((item) => {
	// 		item.url = `${fileUrl}/${item.url}`
	// 	})
	// }
	if (formData.value.pcLogo) {
		if (formData.value.pcLogo.includes('group')) {
			fileList.value = [{ url: `${sysConfig.FULL_URL}${formData.value.pcLogo}` }]
			imageUrl.value = `${sysConfig.FULL_URL}${formData.value.pcLogo}`
		} else {
			fileList.value = formData.value.pcLogo ? JSON.parse(formData.value.pcLogo) : []
			fileList.value.forEach((item) => {
				item.url = `${fileUrl}/${item.url}`
			})
		}
	}
	appInfoApiList()
	isPM()
}
provide('editDate', datas)

// if (isEdit.value) {
// 	formData.value = cloneDeep(editDate.value.pcPropertiesList[0])
// 	if (!formData.value.pcLogo.includes('store')) {
// 		//不是老数据
// 		fileList.value = formData.value.pcLogo ? JSON.parse(formData.value.pcLogo) : []
// 		fileList.value.forEach((item) => {
// 			item.url = `${fileUrl}/${item.url}`
// 		})
// 	}
// 	formRules.singlepointUrl[0].required = formData.value.isSinglepoint == 1 ? true : false
// }
/*变更编辑  结束*/

// 是否单点变化事件
const radioChange = (e) => {
	const { name, value } = e.target
	if (name === 'isSinglepoint') {
		if (value === '1') {
			// 单点地址必填
			formRules.singlepointUrl[0].required = true
			formData.value.singlepointUrl = formData.value.appUrl
		} else {
			formRules.singlepointUrl[0].required = false
			formData.value.singlepointUrl = null
		}
	}
}
const appUrlChange = (e) => {
	const { value } = e.target
	if (value) {
		if (formData.value.isSinglepoint == '1') {
			formData.value.singlepointUrl = value
		}
	}
}

// 自定义上传
const customRequest = (file) => {
	// 后端需要接受的参数是 formData数据，
	const form = new FormData()
	form.append('file', file.file)
	fileApi
		.uploadCosReturnUrlPub(form)
		.then((res) => {
			let arr = [{ name: file.file.name, url: res }]
			formData.value.pcLogo = JSON.stringify(arr)
			file.onSuccess(res, file.file)
			file.status = 'done'
		})
		.catch((err) => {
			setTimeout(() => {
				file.onError()
			}, 1000)
		})
}
const getBase64 = (img, callback) => {
	const reader = new FileReader()
	reader.addEventListener('load', () => callback(reader.result))
	reader.readAsDataURL(img)
}
const handleChange = (info) => {
	if (info.file.status === 'uploading') {
		loading.value = true
		return
	}
	if (info.file.status === 'done') {
		// Get this url from response in real world.
		getBase64(info.file.originFileObj, (base64Url) => {
			imageUrl.value = base64Url
			loading.value = false
		})
	}
	if (info.file.status === 'error') {
		loading.value = false
		fileList.value = []
		// message.error('上传失败')
	}
	if (info.file.status === 'removed') {
		formData.value.pcLogo = ''
	}
}
const beforeUpload = (file) => {
	const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
	if (!isJpgOrPng) {
		message.error('图片类型不对')
	}
	const isLt2K = file.size / 1024 < 200
	if (!isLt2K) {
		message.error('图片大小不超过200K')
	}
	return isJpgOrPng && isLt2K
}
const handlePreview = () => {
	previewVisible.value = true
}
const handleCancel = () => {
	previewVisible.value = false
}

// 监听是否接入待办修改待办相关必填非必填
// pc待办选择是 待阅可以选择是否
const isPcTodoChange = (newData) => {
	Object.keys(formRules).forEach((v) => {
		if (v.includes('pending')) {
			formRules[v][0] = { ...formRules[v][0], required: newData === '1' };
		}
	})
	// 根据待办选择是否切换待办待阅数据
	// if (newData == '1') {
	// 	// 待办选择是
	// 	if (isEdit.value) {
	// 		// 如果是修改,赋值
	// 		Object.keys(changeRulesDB).forEach((v) => {
	// 			formData.value[v] = editDate.value.pcPropertiesList[0][v]
	// 		})
	// 		Object.keys(changeRulesDY).forEach((v) => {
	// 			formData.value[v] = editDate.value.pcPropertiesList[0][v]
	// 		})
	// 		Object.keys(formRules).forEach((v) => {
	// 			if (v.includes('pending')) {
	// 				formRules[v][0].required = newData == '1' ? true : false
	// 			}
	// 		})
	// 	}
	// } else {
	// 	// 待办选择否-清空
	// 	Object.keys(changeRulesDB).forEach((v) => {
	// 		formData.value[v] = ''
	// 	})
	// 	Object.keys(changeRulesDY).forEach((v) => {
	// 		formData.value[v] = ''
	// 	})
	// 	Object.keys(formRules).forEach((v) => {
	// 		if (v.includes('pending')) {
	// 			formRules[v][0].required = newData == '1' ? true : false
	// 		}
	// 	})
	// }
}
// 监听是否接入待阅修改待阅相关必填非必填
const isPcReadtodoChange = (newData) => {
	Object.keys(formRules).forEach((v) => {
		if (v.includes('reading')) {
			formRules[v][0].required = newData == '1' ? true : false
		}
	})
	formRules.batchReadUrl[0].required = newData == '1' ? true : false
	// console.log(formRules)
}


// 表单验证
const handleValidate = () => {
	return new Promise((resolve, reject) => {
		formRef.value
			.validate()
			.then(() => {
				console.log('成功')
				resolve(formData.value)
			})
			.catch(() => {
				console.log('失败')
				resolve(false)
			})
	})
}
const annex = ref(null)
const formSub = ref({ editAppType: '1', appId: '' })
const lastClickTime = ref(0)
const clickInterval = ref(1000) // 定义点击间隔为1秒
const submit = async () => {
	const currentTime = Date.now();
	if (currentTime - lastClickTime.value < clickInterval.value) {
		// 时间间隔过小，直接返回
		return;
	}
	lastClickTime.value = currentTime;

	const form = await handleValidate();
	// const annexVali = await annex.value.handleValidate();
	const annexVali = annex.value.retForm()
	if (!form) return
	formSub.value.appInfoPcPropertiesAddParam = { ...form, ...annexVali }
	const obj = cloneDeep(datas.value)
	const flowParams = {
		isPcTodo: obj.isPcTodo,
		isPcReadtodo: obj.isPcReadtodo,
		isAppTodo: obj.isAppTodo,
		isAppReadtodo: obj.isAppReadtodo,
		appRange: obj.appRange,
		type: '4'    // 0 新建应用 4 接入
	}
	// obj.appAccess = obj.appAccess.join(',')
	// 根据表单项获取流程id
	const res = await appInfoApi.getFlowNew(flowParams)
	// 用流程id获取人员列表
	getRoleList({ appAccess: obj.appAccess, flow: res.flow })
}

// const filt = () => {
// 	let obj = cloneDeep(formSub.value.appInfoPcPropertiesAddParam);
// 	let arrFlat = []
// 	if (formSub.value.isPcTodo == '0') {
// 		arrFlat = formOptionDb.flat();
// 		arrFlat.forEach(v => {
// 			obj[v.prop] = null
// 		})
// 	}
// 	if (formSub.value.isPcReadtodo == '0') {
// 		arrFlat = formOptionDy.flat();
// 		arrFlat.forEach(v => {
// 			obj[v.prop] = null
// 		})
// 	}
// 	return obj
// }
const lastOk = () => {
	btnloding.value = true
	formSub.value.appId = datas.value?.appId
	if (Array.isArray(formSub.value.appInfoPcPropertiesAddParam.compatibility)) {
		formSub.value.appInfoPcPropertiesAddParam.compatibility = formSub.value.appInfoPcPropertiesAddParam.compatibility.join(',')
	}
	formSub.value.appInfoPcPropertiesAddParam.id = datas.value.appInfoPcPropertiesAddParam.id
	formSub.value.appInfoPcPropertiesAddParam = Object.fromEntries(
		Object.entries(formSub.value.appInfoPcPropertiesAddParam).map(([key, value]) => [key, value ? typeof value === 'string' ? value.trim() : value : value])
	);
	// formSub.value.appInfoPcPropertiesAddParam = filt()
	appInfoApi.appAccesss(formSub.value).then((res) => {
		btnloding.value = false
		router.back()
	}).catch(() => {
		btnloding.value = false
	})
}
// 获取选人组件的角色
let roleList = ref([])
const pick = ref(null)
const getRoleList = async (params) => {
	const obj = {
		roleId: params.flow,
		searchKey: '1',
		ascriptionId: datas.value.platformBelongId,
		appRange: datas.value.appRange,
	}
	roleList.value = await bizRoleApi.getList(obj)
	if (roleList.value.length == 0) {
		Modal.confirm({
			title: '提示',
			icon: createVNode(ExclamationCircleOutlined),
			content: '当前环节无可选人员，请联系双门户管理员hqs-swxreq@chinaunicom.cn',
			okText: '确认',
			cancelText: '取消',
		});
	}

	if (pick.value) {
		pick.value.setVisible(true)
	}
}
// 人员选择完成
const setUser = (user) => {
	if (user && user.length > 0) {
		formSub.value.approvalUsers = user
		pick.value.setVisible(false)
		lastOk()
	}
}
</script>

<style lang="less" scoped>
.descri {
	margin-top: 10px;
}

.form-box {


	&-inp {
		border-radius: 4px;
		border: 1px solid rgb(206, 206, 206);
	}
}

.img-sty {
	width: 104px;
	height: 104px;
	cursor: pointer;
}

.btn {
	text-align: right;

	.bt1 {
		margin-right: 10px;
	}
}
</style>
<style>
.scro .ant-descriptions-item-content::-webkit-scrollbar {
	width: 6px;
	height: 10px;
}

.scro .ant-descriptions-item-content::-webkit-scrollbar-track {
	width: 4px;
	background: rgba(#101F1C, 0.1);
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

.scro .ant-descriptions-item-content::-webkit-scrollbar-thumb {
	background-color: rgba(144, 147, 153, .5);
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	transition: background-color .3s;
	cursor: pointer;
}

.scro .ant-descriptions-item-content::-webkit-scrollbar-thumb:hover {
	background-color: rgba(144, 147, 153, .3);
}
</style>
